<template>
  <div class="dialog">
    <div class="dialog-wrap" @click="$emit('update:show', false)">
      <div class="content">
        <div class="input">
          <input @click.stop v-model="url" type="text" placeholder="请输入网址...">
        </div>
        <div class="btns">
          <button @click.stop="handleAddClick">添加</button>
          <button @click.stop="$emit('update:show', false)">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { key } from '../store/index'
import { useStore } from 'vuex'

export default defineComponent({
  emits: ['update:show'],

  setup(props, { emit }) {
    const store = useStore(key)
    const url = ref<string>('')

    const handleAddClick = async () => {
      // window.sendUrl(url)
      window.sendUrl(url.value)

      window.receiveData((data) => {
        store.commit('l/setList', {
          img: data.screenshot,
          title: data.title,
          url: data.url,
          id: Math.random().toString(36).substring(7).split('').join('.')
        })
      })

      emit('update:show', false)
    }

    return {
      handleAddClick,
      url
    }
  }
})
</script>

<style lang='stylus' scoped>
.dialog
  position absolute
  top 0
  left 0
  right 0
  bottom 0
  background rgba(0,0,0,0.6)
  .dialog-wrap
    height 100%
    display flex
    flex-direction column
    align-items center
    justify-content center
    box-sizing border-box
    padding 0 20px
    padding-right 40px
    .content
      width 100%
      input
        width 100%
        height 30px
        outline none
        padding 0
        margin-bottom 10px
        padding-left 10px
        font-size 12px
      .btns
        button
          height 30px
          margin-right 10px
          font-size 12px
          padding 0 20px
</style>